<template>
  <div class="wrapper">
    {{ projectModel.data }}
    <el-form ref="form" :model="projectModel.data" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目部门" prop="deptName">
            <StoreSelectCompP :store="storeSelect1" :signData="{id: 'id', value: 'name', label: 'label'}"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目部门" prop="deptName">
            <el-input v-model="projectModel.data.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目部门" prop="deptName">
            <el-input v-model="projectModel.data.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目部门" prop="deptName">
            <el-input v-model="projectModel.data.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目部门" prop="deptName">
            <!-- <StoreTableComp :data="projectModel.data.deptName"></StoreTableComp> -->
          </el-form-item>
        </el-col>  
      </el-row>
    </el-form>
    <div class="operate">
      <el-button @click="$emit('ok')">提交</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>
<script>
import StoreFormComp from '@/components/Form/StoreFormComp.vue'
import StoreTableComp from '@/components/Table/StoreTableComp.vue'
import StoreSelectCompP from '@/components/Select/StoreSelectCompP.vue'
import { ProjectModel, StoreSelect1, StoreSelect2, StoreSelect3, StoreSelect4 } from '@/model/form/storeFormModel.js'

export default {
  name: 'FormCompDialog',
  beforeCreate(){
    this.projectModel = new ProjectModel()
    this.storeSelect1 = new StoreSelect1()
    this.storeSelect2 = new StoreSelect2()
    this.storeSelect3 = new StoreSelect3()
    this.storeSelect4 = new StoreSelect4()
  },
  components: {
    StoreFormComp,
    StoreTableComp,
    StoreSelectCompP
  },
  data(){
    // 定义验证规则
    const validateActivityName = (rule, value, callback) => {
      if (!value) {
        // 如果活动名称为空，返回错误信息
        callback(new Error('活动名称不能为空'));
      } else {
        // 验证通过
        callback();
      }
    };
    return {
      rules:{
        deptName: [
          { validator: validateActivityName, trigger: 'blur', required: true }
        ]
      }
    }
  }
}
</script>